<template>
  <div>
    <div class="comment-box">
      <div v-if="isSignIn === 0" class="signInText"><span class="login" @click="GotoLogin">登录</span>留言吧</div>
      <div class="bottom">
        <div class="dec">
          <span>共<span class="commentTotal">{{commentArray.length}}</span>条留言</span>
        </div>
        <div class="CommentInput">
          <img :src="imageUrl?imageUrl:defaultAvatar" alt="">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" style="width: 100%;">
            <el-form-item prop="desc">
              <el-input type="textarea" placeholder="请输入内容并按回车键发送" v-model.trim="ruleForm.desc"
                @keyup.13.native="SendComment">
              </el-input>
            </el-form-item>
          </el-form>

        </div>
        <h1 class="threed" style="float: left; margin-top: -30px; color: red;">全部评论</h1>
        <!-- 评论区 -->
        <el-card class="box-card" style="margin-top: 80px;">
          <ul class="Commentarea">
            <el-empty :image-size="200" v-if='commentArray==0' style="margin-top: 30px;"></el-empty>
            <li :key="index" v-for="(item,index) in commentArray" v-if='commentArray!=0'>
              <div class="Commentareabox">
                <div class="pic">
                  <img :src="item.head_img" alt="">
                </div>
                <div class="side">
                  <div class="CommentTitle">
                    <span class="nickname">{{item.nickname}}: </span>
                    <span class="cmcontent">{{item.cmcontent}}</span>
                  </div>
                  <div class="timerorlike">
                    <span class="timer">{{item.create_time}}</span>
                    <span @click="clickLike(item.id)"><i
                        class="iconfont  My-new-icondianzan"></i>{{item.link_conut}}</span>
                    <span class="vertical">|</span>
                    <span @click='reply'>回复</span>
                    <span class="delete" v-if="thisNickName === 'MACH'" @click="handleDelect(item.id)">删除</span>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        props: ['articleId'],
        data() {
            return {
                commentArray: [],

                ruleForm: {
                    desc: ''
                },
                rules: {
                    desc: [{
                        required: true,
                        message: '请填写评论内容',
                        trigger: 'blur'
                    }]
                },
                imageUrl: sessionStorage.getItem("avatar"),
                defaultAvatar: require("@/assets/img/pl.jpg"),
                thisNickName: sessionStorage.getItem("nickname"),
            }
        },
        methods: {
            handleDelect(id) {
                this.$confirm('此操作将永久删除该评论, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 发起删除的网络请求
                    this.$axios.post('/deletelun', {
                            comment_id: id
                        })
                        .then(res => {
                            if (res.data.code == 0) {
                                //发起删除请求操作
                                layer.msg('删除成功', {
                                    icon: 1,
                                    time: 2000
                                })
                                this.GetArticleComment()
                            }
                        }).catch(e => {
                            console.log(e)
                        })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

            GotoLogin() {
                this.$router.push({
                    name: 'login'
                })
            },
            // 获取文章评论
            GetArticleComment() {
                this.$axios.get('/Allmessageslun', {
                        params: {
                            article_id: this.articleId
                        }
                    })
                    .then(res => {
                        // 将得到的数组进行反转再保存
                        this.commentArray = res.data.data.reverse();
                    })
            },
            // 发送评论
            SendComment() {
                this.$refs.ruleForm.validate(valid => {
                    if (valid) {
                        if (sessionStorage.getItem('token')) {
                            // 发起评论请求
                            this.$axios.post('/publishlun', {
                                content: this.ruleForm.desc,
                                // 发送文章id
                                article_id: this.articleId
                            }).then(res => {
                                if (res.data.code == 0) {
                                    layer.msg(res.data.msg, {
                                        icon: 1,
                                        time: 2000
                                    })
                                }
                                this.GetArticleComment()
                                this.$refs.ruleForm.resetFields()
                            })
                        } else {
                            this.$message({
                                message: '请登录后进行操作',
                                type: 'warning'
                            });
                            this.$router.push({
                                name: 'login'
                            })
                        }
                    } else {
                        // 登录表单校验失败
                        alert('表单验证失败')
                        return false;
                    }
                })
            },
            //评论点赞
            clickLike(id) {
                if (sessionStorage.getItem('token')) {
                    this.$axios.post('/clickLikelun', {
                        id: id
                    }).then(res => {
                        if (res.data.code == 0) {
                            window.layui.use('layer', function() {
                                const layer = window.layui.layer
                                layer.msg('点赞成功')

                            })
                            this.GetArticleComment()
                        }
                    })
                } else {
                    this.$message({
                        message: '请登录后进行操作',
                        type: 'warning'
                    });
                    this.$router.push({
                        name: 'login'
                    })
                }
            },
            //回复评论
            reply() {
                if (sessionStorage.getItem('token')) {
                    window.layui.use('layer', function() {
                        const layer = window.layui.layer
                        layer.msg('维护中....')

                    })
                } else {
                    this.$message({
                        message: '请登录后进行操作',
                        type: 'warning'
                    });
                    this.$router.push({
                        name: 'login'
                    })
                }
            }
        },
        computed: {
            // 查询登录状态
            isSignIn() {
                return this.$store.state.isSignIn;
            },
        },
        created() {
            this.GetArticleComment()
        },

    }
</script>

<style lang="less" scoped>
    .top {
        overflow: hidden;
        position: relative;
        margin-bottom: 85px;
        .top-left,
        .top-right {
            float: left;
        }
        .top-left {
            margin-right: 25px;
            img {
                width: 130px;
            }
        }
        .top-right {
            div {
                margin: 15px 0;
            }
            .title {
                font-size: 25px;
                font-weight: 400;
            }
        }
        .top-right-btn {
            position: absolute;
            bottom: 1px;
            right: 0px;
        }
    }
    
    .bottom {
        .dec {
            margin-bottom: 25px;
        }
        .CommentInput {
            display: flex;
            margin-bottom: 55px;
            img {
                width: 75px;
                height: 75px;
                margin: 0 15px;
                border-radius: 5px;
            }
        }
    }
    
    .commentTotal {
        color: red;
    }
    
    .Commentarea {
        li {
            font-size: 14px;
            margin: 10px 0;
            width: 100%;
            border-bottom: 1px dashed rgb(204, 204, 204);
            .Commentareabox {
                padding: 15px 0;
                overflow: hidden;
                display: flex;
                .pic,
                .side {
                    .nickname {
                        color: skyblue;
                    }
                    .timerorlike {
                        margin-top: 15px;
                        .timer {
                            color: #999;
                        }
                        i {
                            margin-right: 8px;
                        }
                        .vertical {
                            margin: 0 10px;
                        }
                        .delete {
                            margin-right: 10px;
                            color: skyblue;
                            cursor: pointer
                        }
                    }
                }
                .pic {
                    img {
                        width: 50px;
                        margin-right: 10px;
                    }
                }
                .side {
                    width: 93%;
                    .timerorlike {
                        .timer {
                            float: left;
                        }
                        span {
                            float: right;
                        }
                    }
                }
            }
        }
    }
    
    .My-new-icondianzan {
        // 鼠标小手
        cursor: pointer;
    }
    
    .signInText {
        margin-bottom: 10px;
        .login {
            // 鼠标小手
            cursor: pointer;
            color: skyblue;
        }
    }
</style>